<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import store from "@/store";

// 模拟收藏数据
interface CollectedItem {
    id: number;
    title: string;
    company: string;
    salary: string;
    date: string;
    type: "job" | "company";
}

const loading = ref(true);
const collections = ref<CollectedItem[]>([]);

// 获取收藏数据
const getCollections = () => {
    loading.value = true;

    // 模拟API请求
    setTimeout(() => {
        collections.value = [
            {
                id: 1,
                title: "前端开发工程师",
                company: "科技有限公司",
                salary: "15k-25k",
                date: "2025-05-01",
                type: "job",
            },
            { id: 2, title: "UI设计师", company: "互联网科技", salary: "12k-18k", date: "2025-05-02", type: "job" },
            { id: 3, title: "腾讯科技", company: "互联网", salary: "", date: "2025-05-03", type: "company" },
            { id: 4, title: "阿里巴巴", company: "电子商务", salary: "", date: "2025-05-04", type: "company" },
        ];
        loading.value = false;
    }, 800);
};

// 取消收藏
const removeCollection = (id: number) => {
    ElMessage.success("取消收藏成功");
    collections.value = collections.value.filter((item) => item.id !== id);
};

onMounted(() => {
    getCollections();
});
</script>

<template>
    <div class="collections-container">
        <div class="page-title">
            <h2>我的收藏</h2>
            <el-divider />
        </div>

        <el-tabs>
            <el-tab-pane label="职位收藏" name="jobs">
                <el-card v-loading="loading" class="list-card">
                    <template v-if="!loading && collections.filter((i) => i.type === 'job').length === 0">
                        <el-empty description="暂无收藏的职位" />
                    </template>

                    <el-table v-else :data="collections.filter((i) => i.type === 'job')" style="width: 100%">
                        <el-table-column prop="title" label="职位名称" min-width="200">
                            <template #default="{ row }">
                                <div class="job-title">{{ row.title }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="company" label="公司名称" min-width="180" />
                        <el-table-column prop="salary" label="薪资" min-width="120" />
                        <el-table-column prop="date" label="收藏时间" min-width="120" />
                        <el-table-column label="操作" width="120">
                            <template #default="{ row }">
                                <el-button type="danger" size="small" link @click="removeCollection(row.id)">
                                    取消收藏
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>

            <el-tab-pane label="企业收藏" name="companies">
                <el-card v-loading="loading" class="list-card">
                    <template v-if="!loading && collections.filter((i) => i.type === 'company').length === 0">
                        <el-empty description="暂无收藏的企业" />
                    </template>

                    <el-table v-else :data="collections.filter((i) => i.type === 'company')" style="width: 100%">
                        <el-table-column prop="title" label="企业名称" min-width="200">
                            <template #default="{ row }">
                                <div class="company-title">{{ row.title }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="company" label="行业" min-width="180" />
                        <el-table-column prop="date" label="收藏时间" min-width="120" />
                        <el-table-column label="操作" width="120">
                            <template #default="{ row }">
                                <el-button type="danger" size="small" link @click="removeCollection(row.id)">
                                    取消收藏
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped>
.collections-container {
    padding: 10px 0;
}

.page-title {
    margin-bottom: 20px;
}

.page-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.list-card {
    margin-bottom: 20px;
}

.job-title,
.company-title {
    font-weight: 500;
    color: #1890ff;
    cursor: pointer;
}

.job-title:hover,
.company-title:hover {
    text-decoration: underline;
}
</style>
